<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <!-- M: 模型model    V：视图view    VM：试图模型 view model -->
    <!-- data 里面的所有属性 及vue原型上的所有属性，在vue模板VM中都可以使用 -->

    <div id="root">
        <h1>名称：{{name}}</h1>
        <h1>地址：{{address}}</h1>
        <!-- 页面控制台打印的vm属性可以直接获取 -->
        <!-- <p>VM：{{$options.components}}</p> -->
        <p>VM：{{$options}}</p>
        <p>VM2：{{_isVue}}</p>
    </div>


    <script type="text/javascript">
        // 阻止vue启动时候生成生产提示
        Vue.config.productionTip = false

        // 创建vue实例
        const vm = new Vue({
            el: "#root",  
            data() {
                return {
                    name: "aBiu",
                    address: "上海"
                }
            },
        })
        // 打印vue实例，也就是vm
        console.log(vm);

    </script>
</body>

</html>